<template>
  <div class="good-price">
    <transition name="vertical-fade">
      <div class="placeholder" v-show="showSearchTitle" ref="topPlaceHolder"></div>
    </transition>
    <div class="box">
      <div @click="routeToDetailPage(article)" class="item" :class="getClass(index)" v-for="(article, index) in goodpriceList" :key="article.article_id">
        <div class="img-wrapper">
          <img v-lazy="mgetImgSrc(article.article_pic)" width="80%"/>
        </div>
        <span class="ellipse">{{article.article_title}}</span>
        <div class="price">{{article.article_price}}</div>
        <div class="bottom-wrapper">
          <div class="mall">{{article.article_mall}}</div>
          <div class="comments">
            <i class="weui icon-comments-o"></i><span>{{article.article_comment}}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="scroll-loading-wrapper">
      <scroll-loading v-show="loadingFlag && hasLoadingIds.length > 19"></scroll-loading>
    </div>
    <div class="fullscreen-loading-wrapper" v-show="loadingFlag && hasLoadingIds.length < 1">
      <div class="fullscreen-loading-inner">
        <div class="fs-loading">
          <fullscreen-loading></fullscreen-loading>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { searchTitleMixin, scrollMixin, routeGoodsDetailMixn } from 'common/js/mixin'
import { getGoodPrice } from 'api/goodPrice'
import ScrollLoading from 'base/scroll-loading/scroll-loading'
import FullscreenLoading from 'base/fullscreen-loading/fullscreen-loading'
import { getImgSrc, filterIds, filterList, genArrOfIds } from 'common/js/tools'

export default {
  name: 'good-price',
  mixins: [ searchTitleMixin, scrollMixin, routeGoodsDetailMixn ],
  components: { ScrollLoading, FullscreenLoading },
  data () {
    return {
      goodpriceList: [],
      mountedTimestamp: new Date().getTime(),
      loadingFlag: false,
      hasLoadingIds: []
    }
  },
  computed: {
  },
  methods: {
    mgetImgSrc (url) {
      return getImgSrc(url)
    },
    routeToDetailPage (article) {
      this.routeToGoodsDetailPage(article)
    },
    getClass (index) {
      // return ((index % 2) > 0) ? 'border-bottomleft' : 'border-bottom'
      return 'border'
    },
    getMoreList () {
      if (this.loadingFlag) return // 如果数据正在加载的话，不进行重复加载
      this.loadingFlag = true
      getGoodPrice(this.mountedTimestamp).then((resp) => {
        if (resp.message === '0') {
          // this.hotRecommentList = resp.data
          let newData = resp.data
          let arrIds = genArrOfIds(newData)
          let newValidIds = filterIds(arrIds, this.hasLoadingIds)
          let validItems = filterList(newValidIds, newData)
          this.goodpriceList = this.goodpriceList.concat(validItems)
          this.hasLoadingIds = this.hasLoadingIds.concat(newValidIds)
          if (!validItems.length) {
            this.resetMountedTimestamp()
          }
          console.log('goodprice 页面新加载了(' + validItems.length + ')条数据')
          this.loadingFlag = false
        }
      }).catch(() => {
        this.loadingFlag = false
      })
    }
  },
  activated () {
    this.$store.commit('SET_TABS_STATE', true)
    this.$store.commit('SET_SEARCH_TITLE', true)
  },
  created () {
    this.loadingFlag = true
    getGoodPrice(this.mountedTimestamp).then((resp) => {
      if (resp.message === '0') {
        this.goodpriceList = resp.data
      }
      this.loadingFlag = false
    }).catch(() => {
      this.loadingFlag = false
    })
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '~common/stylus/mixin'
@import '~common/stylus/variable'

.good-price
  padding-bottom: 80px
  .placeholder
    width: 100%
    height: 40px
  .box
    padding: 10px
    display: flex
    flex-wrap: wrap
    .item
      flex: 0 0 50%
      position: relative
      padding-bottom: 40px
      overflow: hidden
      .img-wrapper
        width: 100%
        text-align: center
        margin: 6px 0
        img
          width: 80%
          max-width: 80%
          display: inline-block
      .ellipse
        display: -webkit-box
        -webkit-box-orient: vertical
        -webkit-line-clamp: 2
        overflow: hidden
        font-size: 14px
        line-height: 20px
        font-weight: 700
        vertical-align: middle
        padding: 0 5px
        margin-bottom: 8px
        &.unvisited
          color: #333333
        &.visited
          color: $color-text-light
      .price
        padding: 0 5px
        font-size: 14px
        line-height: 18px
        no-wrap()
        max-width: 80%
        color: #F04848
      .bottom-wrapper
        position: absolute
        left: 0
        bottom: 0
        width: 100%
        overflow: hidden
        color: #C1C1C1
        font-size: 8px
        line-height: 12px
        padding: 5px
        .mall
          float: left
          vertical-align: top
          width: 50%
          font-size: 12px
          line-height: 18px
          overflow: hidden
          no-wrap()
        .comments
          vertical-align: top
          float: right
          padding-right: 10px
          i, span
            vertical-align: top
            font-size: 12px
            line-height: 14px
            color: #888888
          span
            padding: 0 10px
  .fullscreen-loading-wrapper
    z-index: 11
    position: fixed
    left: 0
    top: 0
    right: 0
    bottom: 0
    background: #FFFFFE
    .fullscreen-loading-inner
      position: relative
      width: 100%
      height: 100%
      .fs-loading
        position: absolute
        width: 100%
        top: 50%
        text-align: center
        transform: translateY(-50%)
</style>
